
class stream_graph {
    constructor(svg_id) {
        this.width = 1240
        this.height = 250

        this.svg = d3.select('#' + svg_id)
            .attr("width", this.width)
            .attr("height", this.height)
            .attr("viewBox", [0,0, this.width, this.height])
    }

    clear() {
        this.svg.selectAll("*").remove()
    }

    vis(data) {
        const marginTop = 10;
        const marginRight = 10;
        const marginBottom = 20;
        const marginLeft = 40;

        // Determine the series that need to be stacked.
        
        for (let index = 0; index < data['values'].length; index++) {
            const key = data['values'][index]['time'];
            data['values'][index]['time'] = new Date(2019, 7, 22, key / 3600 % 24, key / 60 % 60, key % 60)
        }
        const stackGen = d3.stack()
            .keys(data['keys'])
            // .order(d3.stackOrderReverse)
            // .offset(d3.stackOffsetWiggle)
            
        const series = stackGen(data['values']);

        // Prepare the scales for positional and color encodings.
        const xScale = d3.scaleTime()
            .domain(d3.extent(data['values'], d => d.time))
            .range([marginLeft, this.width - marginRight]);

        // yMax = 
        const yScale = d3.scaleLinear()
            .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
            .rangeRound([this.height - marginBottom, marginTop]);

        const colorScale = d3.scaleOrdinal()
            .domain(data['keys'])
            .range(d3.schemeTableau10);
            // .range(d3.schemeCategory20);

        // // Construct an area shape.
        const area = d3.area()
            .x(d => xScale(d.data.time))
            .y0(d => yScale(d[0]))
            .y1(d => yScale(d[1]))
            .curve(d3.curveBasis)

        // Add the y-axis, remove the domain line, add grid lines and a label.
        this.svg.append("g")
            .attr("transform", `translate(${marginLeft},0)`)
            .call(d3.axisLeft(yScale).ticks(this.height / 80))
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll(".tick line").clone()
                .attr("x2", this.width - marginLeft - marginRight)
                .attr("stroke-opacity", 0.1))
            .call(g => g.append("text")
                .attr("x", -marginLeft)
                .attr("y", 10)
                .attr("fill", "currentColor")
                .attr("text-anchor", "start")
                .text("Area Persons"));

        // Append a path for each series.
        this.svg.append("g")
            .selectAll()
            .data(series)
            // .enter()
            // .append("path")
            .join("path")
            .attr("d", area)
            .attr("fill", d => colorScale(d.key))
            .append("title")
            .text(d => d.key);

        // Append the horizontal axis atop the area.
        this.svg.append("g")
            .attr("transform", `translate(0,${this.height - marginBottom})`)
            .call(d3.axisBottom(xScale).tickSizeOuter(0));

    }
}